<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height: 252px">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg" class="user-avator" alt />
                        <div class="user-info-cont">
                            <h2 class="user_title">欢迎使用学生图书管理系统</h2>
                            <div>{{ user_info.userRole }}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>{{ user_info.userData }}</span>
                    </div>
                    <div class="user-info-list">
                        上次登录地点：
                        <span>{{ user_info.userCity }}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height: 252px">
                    <div slot="header" class="clearfix">
                        <span>入馆情况</span>
                    </div>
                    上午 <el-progress :percentage="30.3" color="#42b983"></el-progress>中午
                    <el-progress :percentage="10.2" color="#f1e05a"></el-progress>下午 <el-progress :percentage="30.3"></el-progress>晚上
                    <el-progress :percentage="29.4" color="#f56c6c"></el-progress>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{peopleNum.libSev}}</div>
                                    <div>入馆人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{peopleNum.maxPeo}}</div>
                                    <div>馆内最多人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{ padding: '0px' }">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-read grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{peopleNum.peopleNums}}</div>
                                    <div>总浏览人数</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover" style="height: 403px">
                    <div slot="header" class="clearfix">
                        <span>待办事项</span>
                        <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                    </div>
                    <el-table :show-header="false" :data="todoList" style="width: 100%">
                        <el-table-column width="40">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.status"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <div class="todo-item" :class="{ 'todo-item-del': scope.row.status }">{{ scope.row.title }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column width="60">
                            <template>
                                <i class="el-icon-edit"></i>
                                <i class="el-icon-delete"></i>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-carousel :interval="4000" type="card" height="850px">
            <el-carousel-item v-for="item in paiming" :key="item">
                <h1 class="medium">{{ '榜样书籍' }}</h1>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import session from '../../utils/session';
import Schart from 'vue-schart';
import bus from '../common/bus';
import axios from 'axios'
export default {
    name: 'dashboard',
    data() {
        return {
            peopleNum:{
                libSev:0,
                maxPeo:0,
                peopleNums:0
            },
            name: localStorage.getItem('ms_username'),
            paiming: ['红楼梦', '西游记', '三国演义'],
            todoList: [
                {
                    title: '将购买的书籍入库',
                    status: false
                },
                {
                    title: '将删除的书籍信息清空',
                    status: false
                },
                {
                    title: '王先康同学进入图书馆次数异常',
                    status: false
                },

                {
                    title: '王先康同学密码被更改',
                    status: true
                },
                {
                    title: '王先康规定时间未归还借阅书籍',
                    status: true
                }
            ],
            user_info: null
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    created() {
        this.getNowData();
        this.getUserInfo();
        
    },
    methods: {
        getNowData() {
             axios({
                method: 'get',
                url: 'http://172.22.10.90:3000/dataList'
            }).then((res) => {
                console.log(1111);
                console.log(res.data.data[0]);
                this.peopleNum.libSev = res.data.data[0].ruguanshu
                this.peopleNum.maxPeo = res.data.data[0].zuiduoshu
                this.peopleNum.peopleNums = res.data.data[0].renshu
                console.log(this.peopleNum);

            }).catch((err)=> {
                console.log(err);
            });
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        getUserInfo() {
            this.user_info = session.getStorage('user_info')[0];
            console.log(this.user_info);
        }
        // handleListener() {
        //     bus.$on('collapse', this.handleBus);
        //     // 调用renderChart方法对图表进行重新渲染
        //     window.addEventListener('resize', this.renderChart);
        // },
        // handleBus(msg) {
        //     setTimeout(() => {
        //         this.renderChart();
        //     }, 200);
        // },
        // renderChart() {
        //     this.$refs.bar.renderChart();
        //     this.$refs.line.renderChart();
        // }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.el-carousel__item:nth-child(5) {
    background-image: url('../../assets/home/3.jpg');
    background-size: cover !important;
    background-repeat: no-repeat;
    overflow: hidden;
}

.el-carousel__item:nth-child(4) {
    background-image: url('../../assets/home/2.jpg');
    background-size: cover !important;
    background-repeat: no-repeat;
    overflow: hidden;
}

.el-carousel__item:nth-child(3) {
    background-image: url('../../assets/home/1.jpg');
    background-size: cover !important;
    background-repeat: no-repeat;
    overflow: hidden;
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user_title {
    color: black;
    margin-bottom: 10px;
    font-family: '楷体';
    font-weight: bolder;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}
h1 {
    color: #fff;
    font-weight: bolder;
    font-family: '宋体';
    text-align: center;
    line-height: 20px;
    margin-top: 30px;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
